<template>
 <div>
   <el-upload
     action="#"
     :class="{'avatar-uploader':!isMultiple}"
     :list-type="isMultiple?'picture-card':'text'"
     accept=".png,.jpg,.jpeg"
     :multiple="isMultiple"
     :on-change="handleChange"
     :show-file-list="isMultiple"
     :file-list="fileList"
     :http-request="handleUpload"
     >
     <i slot="default" class="el-icon-plus" v-if="isMultiple"></i>
     <div slot="file" v-if="isMultiple" slot-scope="{file}">
       <div class="display-img" :style="{'background-image':'url('+file.url+')'}">
       </div>
       <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
     </div>
     <div v-if="!isMultiple">
       <img v-if="fileList[0]" :src="fileList[0].url" class="display-img" style="width: unset">
       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </div>
   </el-upload>
   <el-dialog :visible.sync="dialogVisible"  v-dialog-drag>
     <img width="100%" :src="dialogImageUrl" alt="">
   </el-dialog>
 </div>

</template>

<script>

import {getImage,addImage,delImage} from '@/api/common'
export default {
  name: 'uploadImage',
  data() {
    return {
      dialogImageUrl: '',
      fileList:[],
      dialogVisible: false,
      disabled: false,
    };
  },
  props:{
    images:{
      type: Array,
      default:()=>[]
    },
    isMultiple:{
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleRemove(file) {
      let index = this.fileList.findIndex(item=>item.url === file.url)
      delImage({imageUrl:this.images[index]}).then(resp=>{
        this.fileList.splice(index,1)
        this.images.splice(index,1)
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleChange(file,fileList){
      this.fileList = fileList
    },
    handleUpload(params){//上传
      let form = new FormData()
      form.append('image',params.file)
      addImage(form).then(resp=>{
        this.images.push(resp.msg)
      }).catch(e=>{
        this.fileList.pop()
      })
    }
  },
  watch:{
    images:{
      handler:function(){
        if(this.images && this.images.length){ //不为空 即修改图片 需赋值 fileList
          this.fileList = this.images.map(item=>({url:getImage(item)}))
        }else{
          this.fileList = []
        }
      },
      immediate:true
    }
  }
}
</script>

<style scoped lang="scss">
.display-img{
  position:relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 146px;
  width: 100%;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
